<template>
  <view
    class="status_bar fs_18"
    :style="{
      backgroundColor: bgcolor,
      paddingTop: paddingTop + 'px',
      paddingBottom: paddingBottom + 'px',
      marginTop: marginTop + 'px',
      color: color,
      height: height + 'px',
      lineHeight: height + 'px',
    }"
  >
    <uni-icons
      v-if="showBack"
      class="back"
      @tap="goback"
      :type="iconType"
      :color="color"
      :size="iconsize"
    />
    {{ title }}
    <slot name="center"></slot>
    <slot name="right"></slot>
  </view>
</template>

<script  lang="ts" setup>
import { ref } from 'vue'
let iconType: any = ref('left')
defineProps({
  title: {
    type: String,
    default: '',
  },
  color: {
    type: String,
    default: '#fff',
  },
  iconsize: {
    type: String,
    default: '20',
  },
  bgcolor: {
    type: String,
    default: '',
  },
  showBack: {
    type: Boolean,
    default: false,
  }, //是否显示返回按钮
  path: {
    type: String,
    default: '',
  }, //页面路径
  paddingTop: {
    type: String,
    default: '12',
  },
  paddingBottom: {
    type: String,
    default: '12',
  },
  marginTop: {
    type: String,
    default: '10',
  },
  height: {
    type: String,
    default: '24',
  },
})
const goback = () => {
  uni.navigateBack({
    delta: 1,
  })
}
</script>

<style lang="scss" scoped>
.status_bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
  .back {
    margin-left: 12px;
  }
}
</style>